<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>萌宠集结号</title>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/base.css">
</head>
<body>
  <audio autoplay loop>
    <source src="./bgm.mp3" type="audio/mpeg">
  </audio>
<div class="bigbg wrapper">
    
  <div class="cunzi wrapper">
    
    <!-- 添加三个 NPC 元素 -->
    <div class="cute" id="cute1">
      <img src="../images/npc15.png" alt="" style="display: none;">
    </div>
    <div class="cute" id="cute2">
      <img src="../images/boss1.png" alt="" style="display: none;">
    </div>
    <div class="cute" id="cute3">
      <img src="../images/npc11.png" alt="" style="display: none;">
    </div>
    <div id="character">
      <img id="up" src="../images/up.png" alt="">
      <img id="down" src="../images/down.png" alt="">
      <img id="left" src="../images/left.png" alt="">
      <img id="right" src="../images/right.png" alt="">
    </div>

    <div class="slideshow-container">
      <div class="slide">
        <a href="index4.html" onclick="showModal(event)"><img src="../images/beimen.png" alt="beimen"></a>
      </div>
      <div class="slide">
        <a href="index4.html"  onclick="showModal(event)"><img src="../images/beimen1.png" alt="beimen1"></a>
      </div>
    </div>
<!-- 加载动画 -->
<div id="loadingAnimation" class="loading-animation">
  <img src="../images/loading.gif" alt="Loading">
</div>

<!-- 弹出图片 -->
<div id="popupImage" class="popup-image">
  <ul>
    <li><img src="../images/loadingimg2.gif" alt=""></li>
    <li><img src="../images/loadingimg4.gif" alt=""></li>
    <li><img src="../images/loadingimg5.gif" alt=""></li>
</ul>
</div>

   
  </div>
  <!--boss按钮-->>
  <button id="bossBox" class="boss1" onclick="openpk()"></button>
  <!--新手村怪物-->
  <button class="bigboss"></button>
  <!--主角头像-->
  <button class="bighead"></button>
  <!--背景音乐按钮-->
  <button id="mc" onclick="toggleMusic()"></button>
  <audio id="myAudio">
    <source src="../music/bgm1.mp3" type="audio/mpeg">
  </audio>
  <!--指南提示-->
  <button id="help" ></button>
  <!--当前场景-->
  <button id="where" ><h2>章节一<br>前进</h2></button>
  <!--背包功能-->
  <button id="bag" ></button>
  <!--宠物功能-->
  <button id="pet"></button>
  <!--任务功能-->
  <button id="task"></button>
  <!--狩猎功能-->
  <button id="hunt"></button>
  <!--成就功能-->
  <button id="win"></button>
  <!--商店功能-->
  <button id="shop"></button>
  <!--农场功能-->
  <button id="farm"></button>
  <!--宠物图鉴功能-->
  <button id="book"></button>

  
  <!--指南提示弹窗-->
<div id="helpPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>指南提示</h3>
    <p>这里是指南提示的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<!--当前场景弹窗-->
<div id="wherePopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>当前场景</h3>
    <p>你现在在陀普斯小镇。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<!--背包功能弹窗-->
<div id="bagPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>背包功能</h3>
    <p>这里是背包功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<!--宠物功能弹窗-->
<div id="petPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>宠物功能</h3>
    <p>这里是宠物功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--任务功能弹窗-->
<div id="taskPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>任务功能</h3>
    <p>这里是任务功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--狩猎功能弹窗-->
<div id="huntPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>狩猎功能</h3>
    <p>这里是狩猎功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--宠物图鉴功能弹窗-->
<div id="bookPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>宠物图鉴功能</h3>
    <p>这里是宠物图鉴功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--成就功能弹窗-->
<div id="winPopup" class="popupa">
    <!--弹窗内容-->
  <div class="popup-content">
    <h3>成就功能</h3>
    <p>这里是成就功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--商店功能弹窗-->
<div id="shopPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>商店功能</h3>
    <p>这里是商店功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--农场功能弹窗-->
<div id="farmPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>农场功能</h3>
    <p>这里是农场功能的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>
 
    
  </div>

</div>

</div>

</body>
</html>

<script type="text/javascript" src="../scripts/4.js"></script>
</body>
</html>